<!--
 * @Description  : 
 * @Author       : 陈韵同
 * @Date         : 2021-02-07 09:42:58
 * @LastEditTime : 2021-02-07 10:17:02
 * @LastEditors  : 陈韵同
 * @FilePath     : e:\协同云组件库\新建文件夹\docs\pages\components\cloud-loading\example3.vue
-->
<template>
  <div>
    <CloudButton @click="clickBtn()">点我</CloudButton>
    <CloudModal
      :visible="visible"
      :destroyOnClose="true"
      dialogClass="test-dialog"
      subTitle="我是副标题"
      okText="确定"
      cancelText="取消"
      :okLoading="getOkLoading"
      @ok="handleOk()"
      @cancel="closeModel()"
    >
      我是全局Loading我是全局Loading我是全局Loading我是全局Loading我是全局Loading
      我是全局Loading我是全局Loading我是全局Loading我是全局Loading我是全局Loading
      我是全局Loading我是全局Loading我是全局Loading我是全局Loading我是全局Loading
      我是全局Loading我是全局Loading我是全局Loading我是全局Loading我是全局Loading
      我是全局Loading我是全局Loading我是全局Loading我是全局Loading我是全局Loading
      我是全局Loading我是全局Loading我是全局Loading我是全局Loading我是全局Loading
      我是全局Loading我是全局Loading我是全局Loading我是全局Loading我是全局Loading
      我是全局Loading我是全局Loading我是全局Loading我是全局Loading我是全局Loading
    </CloudModal>
  </div>
</template>

<script>
export default {
  title: '3. this.$cloudLoading',
  data() {
    return {
      visible: false,
      checked: false,
      timer: null,
    }
  },
  computed: {
    getOkLoading() {
      return this.checked
    }
  },
  methods: {
    clickBtn() {
      this.visible = !this.visible
    },
    closeModel() {
      this.visible = false
      console.log('cancelcancelcancel')
    },
    handleOk() {
      console.log('okokok')
    }
  },
  watch: {
    visible(val) {
      val && this.$cloudLoading.show()
      window.setTimeout(() => {
        this.$cloudLoading.hide()
      }, 3000)
    }
  }
}
</script>

<style lang="scss">
</style>